<template>
	<view
		:class="'mui mui-typography mui-selectable display-'+display+' gutterBottom-'+gutterBottom+' paragraph-'+paragraph+' no-wrap-'+noWrap+' '+muiClasses"
		:style="mStyle">
		<slot />
	</view>
</template>

<script>
	var styleProps = ['color', 'variant', 'size'];
	export default {
		name: "mui-typography",
		props: {
			mClass: {
				type: String,
				default: ''
			},
			mStyle: {
				type: String,
				default: ''
			},
			align: {
				type: String,
				default: 'inherit'
			},
			color: {
				type: String,
				default: 'initial'
			},
			display: {
				type: String,
				default: 'initial'
			},
			gutterBottom: {
				type: Boolean,
				default: false
			},
			noWrap: {
				type: Boolean,
				default: false
			},
			paragraph: {
				type: Boolean,
				default: false
			},
			variant: {
				type: String,
				default: 'body1'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			_defindMuiBehaviors: function _defindMuiBehaviors() {
				var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
				/** 整合所有样式 */
				var muiClassesArr = [];
				styleProps.forEach(function(sp) {
					muiClassesArr.push(params[sp] ? 'mui-' + sp + '-' + params[sp] : '');
				});
				if (params.mClass) {
					muiClassesArr.push(params.mClass);
				}
				var muiClasses = muiClassesArr.join(' ');
				this.$data.muiClasses=muiClasses;
				//this.$set(this.$data, 'muiClasses', newData.muiClasses);
				//this.$data=newData;
			}
		},
		computed: {
			params() {
				const {
					color,
					variant,
					size,
					mClass
				} = this;
				return {
					color,
					variant,
					size,
					mClass,
				}
			}
		},
		watch: {
			params: {
				handler(val) {
					this._firstOberverForMuiClass = true;
					this._defindMuiBehaviors(val)
				},
				immediate: true,
			}
		}
	}
</script>

<style>
	.mui-selectable {
		user-select: text !important;
	}
</style>